<template>
  <section class="breadcrumb">
    <!-- 展开/收起 导航菜单 -->
    <i
      :class="menuServie.close.value ? 'fas fa-align-justify' : 'fas fa-align-left'"
      class="switch-icon"
      @click="menuServie.toggleState"></i>
    <!-- 面包屑 -->
    <breadcrumb />

    <!-- 头像 -->
    <div class="user-menu group">
      <i
        class="full-screen-icon"
        :class="isFullScreen ? 'fas fa-compress' : 'fas fa-expand'"
        @click="toggleFullScreen"></i>

      <el-dropdown placement="top-start" class="dropdown-menu">
        <div class="dropdown-menu-item">
          <el-image :src="userInfo?.imgUrl" class="picture">
            <template #error>
              <div class="image-slot">
                <i class="fas fa-user-circle"></i>
              </div>
            </template>
          </el-image>
          <span class="min-w-20 mobile">{{ userInfo?.name }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$router.push('/admin/user/info')">
              <i class="fas fa-user"></i>
              <span class="text-nowrap">账号管理</span>
            </el-dropdown-item>
            <el-dropdown-item @click="$router.push('/admin/article/list')">
              <i class="fas fa-newspaper"></i>
              <span class="text-nowrap">文章管理</span>
            </el-dropdown-item>
            <el-dropdown-item @click="logout()">
              <i class="fas fa-arrow-right-from-bracket"></i>
              <span class="text-nowrap">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </section>
</template>

<script lang="ts" setup>
import menuServie from '@/hooks/useMenus';
import breadcrumb from '@/layouts/admin/component/breadcrumb.vue';
import userStore from '@/plugins/pinia/stores/user';
import useAuth from '@/hooks/useAuth';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

// 登出
const { logout } = useAuth();

// 用户信息
const userInfo = computed(() => userStore().userInfo);

// 是否全屏
const isFullScreen = ref(false);

// 全屏按钮
const toggleFullScreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
    isFullScreen.value = false;
  } else {
    document.documentElement
      .requestFullscreen()
      .then(() => {
        isFullScreen.value = true;
      })
      .catch(() => {
        ElMessage('全屏请求失败');
      });
  }
};

onMounted(() => {
  // 监听document的fullscreenchange事件（这个事件在所有全屏变更时都会触发）
  document.addEventListener('fullscreenchange', () => {
    isFullScreen.value = document.fullscreenElement !== null;
  });
});
</script>

<style scoped lang="scss">
.breadcrumb {
  @apply pl-1 pr-4 py-2 bg-slate-50 flex  items-center;

  .switch-icon {
    @apply cursor-pointer mr-3;
  }

  .user-menu {
    @apply flex items-center text-sm cursor-pointer relative ml-auto;
    .full-screen-icon {
      @apply text-gray-500 text-xl mr-2;
    }
    .dropdown-menu {
      &:focus-visible {
        outline: 0;
      }
      .dropdown-menu-item {
        @apply flex items-center;
        &:focus-visible {
          outline: 0;
        }
        .picture {
          @apply w-8 h-8 rounded-full object-cover mr-2;
          .image-slot {
            @apply flex justify-center items-center w-full h-full text-white bg-slate-600;
          }
        }
      }
    }
  }
  @media (max-width: 768px) {
    .mobile {
      display: none;
    }
  }
}
</style>
